<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" conten年t="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
      <h>solt作用域插槽</h>
      <p>在父级中，具有scope的特殊属性，name来配置如何接受父组件的分发内容。多个
          slot可以有不同的名字。具名slot将匹配内容片段中对应slot特性的元素任然可以有一个匿名slot
      </p>
      <div id="app-7">
          <my-componet>
              <h1 slot="header">页面标题</h1>
              <p>主要内容的一个个段落</p>
              <p>另一个主要的段落</p>
              <div slot="footer">
                  <address>这里有一些联系人的信息</address>
              </div>
          </my-componet>
      </div>
    </div>
    <script>
        Vue.component('my-componet',{
            //<slot name="footer"></slot>就是的slot标签就是为了渲染在页面上组件中间的内容插进来的叫插槽
            template:'<div class="container"><header><slot name="header"></slot><main><slot></slot></main><footer><slot name="footer"></slot></footer></header></div>',
        })
        var app7=new Vue({
           el:'#app-7',
           data:{},
           methods:{}
        });
    </script>
</body>

</html>